/* dragresize */
/*
Individual corner classes - required for resize support.
These are based on the object name plus the handle ID.
*/
.wwwnet {
  position: absolute;
  border: 1px solid #333;
}
  /*
  The main mouse handle that moves the whole element.
  You can apply to the same tag as wwwnet if you want.
  */
.drsMoveHandle {
  cursor: move;
}

.dragresize {
  position: absolute;
  width: 5px;
  height: 5px;
  font-size: 1px;
  background: #EEE;
  border: 1px solid #333;
  }
.dragresize-tl {
  top: -8px;
  left: -8px;
  cursor: nw-resize;
}
.dragresize-tm {
  top: -8px;
  left: 50%;
  margin-left: -4px;
  cursor: n-resize;
}
.dragresize-tr {
  top: -8px;
  right: -8px;
  cursor: ne-resize;
}
.dragresize-ml {
  top: 50%;
  margin-top: -4px;
  left: -8px;
  cursor: w-resize;
}
.dragresize-mr {
  top: 50%;
  margin-top: -4px;
  right: -8px;
  cursor: e-resize;
}
.dragresize-bl {
  bottom: -8px;
  left: -8px;
  cursor: sw-resize;
}
.dragresize-bm {
  bottom: -8px;
  left: 50%;
  margin-left: -4px;
  cursor: s-resize;
}
.dragresize-br {
  bottom: -8px;
  right: -8px;
  cursor: se-resize;
}

/*-slides-*/
#slides {
  overflow: hidden;
  /* fix ie overflow issue */
  width: 700px;
  height: 241px;
  position: relative;
}

/* remove the list styles, width : item width * total items */  
#slides ul {
  left: 0;
  top: 0;
  list-style: none;
  margin: 0;
  padding: 0;  
  width: 700px;
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
  width: 700px;
  height: 241px; 
  float: left;
}

#slides li img {
  padding: 4px;
}

#slider{} 
  #slider ul, #slider li{
    margin:0;
    padding:0;
    list-style:none;
    }
  #slider li{ 
    /* 
      define width and height of list item (slide)
      entire slider area will adjust according to the parameters provided here
    */ 
    width:696px;
    height:241px;
    overflow:hidden; 
    }